<template>
	<div class="TenantOrder shortorder">
		<div class="TenantOrder-title">
			<div class="title-box">
				<span class="short-title " :class="{titleactive: isshortactive}" @click="shortlong($event)">日租</span>
				<span class="long-title" :class="{titleactive: islongactive}" @click="shortlong($event)">长租</span>
			</div>
		</div>
		<div v-if="isshortactive" class="TenantOrder-content short-content">
			<order-navs @orderListshort="orderListshort"></order-navs>
			<div class="short-item-box">
				<torder-view :data="orderListshortdata" @orderListshort="orderListshort" ref="child"></torder-view>
			</div>
		</div>
		<div v-if="islongactive" class="TenantOrder-content short-content">
			<div class="short-list-box">
				<ul class="long-navul">
					<li class="long-navitem" :class="{navitemactive: islongactiveo}" @click="orderListLong(1,1)">申请中
					</li>
					<li class="long-navitem" :class="{navitemactive: islongactivet}" @click="orderListLong(2,1)">已签约</li>
					<li class="long-navitem" :class="{navitemactive: islongactiveth}" @click="orderListLong(3,1)">已结束</li>
				</ul>
			</div>

			<div class="short-item-box">
				<lorder-view :data="orderListLongdata" @orderListLong="orderListLong" ref="lorder"></lorder-view>
			</div>

		</div>

	</div>

</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import OrderNavs from "./OrderNavs";
	import TorderView from "./TorderView";
	import LorderView from "./LorderView";
	import eventBus from "../assets/libs/eventBus.js";
	export default {
		name: "TenantOrder",
		data() {
			return {
				shortorder: true,
				longorder: false,
				isshortactive: true,
				islongactive: false,
				page: 1,
				orderListLongdata: [],
				pageSize: [],
				orderListshortdata: [],
				islongactiveo: true,
				islongactivet: false,
				islongactiveth: false,
				SessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo")),
				isFirstEnter: false // 是否第一次进入，默认false

			}
		},
		beforeRouteEnter(to, from, next) {
			if(from.name == 'LoderInfo' || from.name == 'ToderInfo') {
				to.meta.isBack = true;
			}
			next();
		},
		activated() {
			var that = this;
			if((!that.$route.meta.isBack) || that.isFirstEnter) {
				that.shortorder = true;
				that.longorder = false;
				that.isshortactive = true;
				that.islongactive = false;
				that.page = 1;
				that.orderListLongdata = [];
				that.pageSize = [];
				that.orderListshortdata = [];
				that.islongactiveo = true;
				that.islongactivet = false;
				that.islongactiveth = false;
				that.isFirstEnter = false; // 是否第一次进入，默认false
				that.SessionUserinfo = JSON.parse(sessionStorage.getItem("userinfo"))

				if(that.SessionUserinfo == null) {
					that.$router.push({
						path: "/login"
					})
					return
				}
					that.orderListshort(700, that.page);

			} else {
				
			}

			// 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
			that.$route.meta.isBack = false;
			// 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
			that.isFirstEnter = false;
		},
		created() {
			var that = this;
			that.isFirstEnter = true;
		},
		computed: {
			...mapGetters([
				'source',
				'userstatus',
			])
		},
		methods: {
			shortlong(event) {
				var that = this;
				if(event.currentTarget.innerText == "日租") {
					that.isshortactive = true;
					that.islongactive = false;
					that.orderListshortdata = [];
					that.orderListshort(700, that.page);
				}
				if(event.currentTarget.innerText == "长租") {

					that.isshortactive = false;
					that.islongactive = true;
					that.orderListLong(1, that.page);
				}
			},
			getMonthByDataEMinusDataS(start, end) {
				start = start.split("-");
				end = end.split("-");
				return(end[0] - start[0]) * 12 + (end[1] - start[1]) + (end[2] - start[2] >= 0 ? 0 : -1);
			},
			orderListshort(order_type, page) {
				var that = this;
				var ajaxSign = {
					"userId": that.SessionUserinfo.id.toString(),
					"token": that.SessionUserinfo.token,
					"source": that.source,
					"order_type": order_type.toString(),
					"user_type": '1',
					"page": page.toString()
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetOrderShortList(ajaxData)
					.then(res => {
						if(res.sta == 203) {
							that.$router.push({
								path: "/login"
							})
						}
						let ajaxdata = res.result;
						//					let datajson = JSON.parse(JSON.stringify(ajaxdata))
						let datajson = ajaxdata
						that.pageSize = datajson.length;

						that.orderListshortdata = that.orderListshortdata.concat(ajaxdata);
						$.each(that.orderListshortdata, function(key, data) {
							let sRDate = new Date(data.houseStartTime);
							let eRDate = new Date(data.houseEndTime);
							let tiemdate = eRDate - sRDate;
							let days = Math.floor(tiemdate / (24 * 3600 * 1000))

							data["jshouseStartTime"] = data.houseStartTime.split("-");
							data["jshouseEndTime"] = data.houseEndTime.split("-");
							data["days"] = days;
						});

						if((that.pageSize % 5) != 0 || that.pageSize == 0) {
							that.$refs.child.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
							return;
						} else {
							that.$refs.child.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
						}
					})
			},
			orderListLong(order_type, page) {

				eventBus.$emit('order_typelong', order_type);
				var that = this;
				if(order_type == 1) {
					order_type = '1';
					that.islongactiveo = true,
						that.islongactivet = false,
						that.islongactiveth = false
				}
				if(order_type == 2) {
					order_type = '2';
					that.islongactiveo = false,
						that.islongactivet = true,
						that.islongactiveth = false
				}
				if(order_type == 3) {
					order_type = '3';
					that.islongactiveo = false,
						that.islongactivet = false,
						that.islongactiveth = true
				}

				var ajaxSign = {
					"userId": that.SessionUserinfo.id.toString(),
					"token": that.SessionUserinfo.token,
					"source": that.source,
					"order_type": order_type,
					"page": page.toString(),
				};
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetOrderLongList(ajaxData)
					.then(res => {
						if(res.sta == 203) {
							that.$router.push({
								path: "/login"
							})
						}
						let ajaxdata = res.result;
						that.pageSize = ajaxdata.length;
						that.orderListLongdata = res.result;

						$.each(that.orderListLongdata, function(item, data) {

							let sRDate = new Date(data.houseStartTime);
							let eRDate = new Date(data.houseEndTime);
							var yearnum = that.getMonthByDataEMinusDataS(data.houseStartTime, data.houseEndTime) / 12;
							data["yearnum"] = yearnum;
							data["order_type"] = order_type;

						});
						if((that.pageSize % 5) != 0 || that.pageSize == 0) {
							that.$refs.lorder.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
							return;
						} else {
							that.$refs.lorder.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
						}
					})
			}

		},
		components: {
			TorderView,
			LorderView,
			OrderNavs
		}
	}
</script>

<style scoped>
	.TenantOrder {
		width: 100%;
		color: #282828;
		font-size: .28rem;
		background: #f6f6f6;
	}
	
	.TenantOrder-title {
		height: 1.25rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #eeecec;
	}
	
	.title-box {
		border-radius: .6rem;
		border: 1px solid #e8e7e7;
		display: flex;
		justify-content: center;
		overflow: hidden;
	}
	
	.TenantOrder-title span {
		display: block;
		height: .69rem;
		line-height: .69rem;
		background: #fdfdfd;
		padding: 0 .37rem;
		box-sizing: border-box;
		color: #c8c8c8;
	}
	
	.TenantOrder-title .titleactive {
		color: #fff;
		background: #e25051;
	}
	
	.TenantOrder-content {
		width: 100%;
	}
	/*日租列表*/
	/*长租导航*/
	
	.long-navul {
		width: 100%;
		display: flex;
	}
	
	.long-navitem {
		width: 33.3333%;
		text-align: center;
		line-height: .69rem;
		background: #fff;
	}
	
	.navitemactive {
		color: #e25051;
		border-bottom: 2px solid #e25051;
	}
</style>